
<template>
  <div id="quesTreeThrough1">
    <!--顶部面包屑导航 选择结果-->
    <mu-list>
      <mu-list-item style="width: 100%;overflow-x: auto;">
        <mu-breadcrumbs divider="—" tag="li">
          <mu-icon value="chevron_right" slot="divider"></mu-icon>
          <mu-breadcrumbs-item  v-for="item in navs" :key="item.label" :disabled="item.disabled">
            <li class="navs"  @click="unexpand(item)">{{item.label}}</li>
          </mu-breadcrumbs-item>
        </mu-breadcrumbs>
      </mu-list-item>
    </mu-list>
    <!--数据列-->
    <div class="list" style="height: calc(100vh - 1.66rem);overflow: auto;margin-top: 10px">
      <mu-list style="height:100%;overflow-y: auto">
        <mu-list-item v-for="(list, index) in lists" button style="margin-bottom: 1px;" :key="index"
                      @click="select(list)">
          <template v-if="list.hasChecked">
            <mu-checkbox v-if="multiple" v-model="list.checked" :value="list.id" :label="list.problemTypeId"></mu-checkbox>
            <mu-radio v-else v-model="list.checked" :value="list.id" :label="list.problemTypeId"></mu-radio>
          </template>
          <mu-list-item-title v-if="!list.hasChecked">{{list.name}}</mu-list-item-title>
          <div style="width: .2rem;position: absolute;right: 1rem;" v-if="!list.hasChecked">
            <i v-show="check == list.id" class="iconfont iconxuanze" style="color: #24D90C;"></i>
          </div>
          <mu-list-item-action @click.stop="expand(list)" v-if="list.children">
              <i class="iconfont iconzuzhi"></i>
              下级
          </mu-list-item-action>
        </mu-list-item>
        <mu-list-item v-if="!lists.length" style="text-align: center;">暂无数据</mu-list-item>
      </mu-list>
    </div>

    <!--选择结果-->
    <mu-list class="fiexd-b" v-if="multiple">
      <mu-list-item>
        <span class="primary-color">已选: {{this.checkedString}}</span>
        <mu-button color="primary" @click="confirm">
          确 定
        </mu-button>
      </mu-list-item>
    </mu-list>

  </div>
</template>

<script>
  // import Search from "@/search/Search.vue"

  export default {
    name: 'quesTreeThrough',
    components: {
      // Search
    },
    props: {
      // 是否多选
      multiple: {
        type: Boolean,
        default: false
      },
      // 原数据 数组
      lists: {
        type: Array,
        default: () => {
          return []
        }
      },
      // 选择结果
      checked: {
        type: Array,
        default: () => {
          return []
        }
      }
    },
    model: {
      prop: "checked",
      event: "change"
    },
    data() {
      return {
        allChecked: false,
        check: '',
        checkedString: '',
        resLists: [],
        navs: [],
        checkedArr: [],
        // 搜索结果
        searchLists: [],
      }
    },
    computed: {},
    created() {
      this.navs = [{
        label: '首页',
        value: 'org',
        id:'-1',
        disabled: true
      }]
    },
    mounted() {
    },
    watch: {
      lists: {
        handler(newVal, oldVal) {
          this.resLists = newVal
        },
        immediate: true,
        deep: true
      },
      checked: {
        handler(newVal, oldVal) {
          this.checkedArr = newVal
          if (this.checkedArr.length) {
            this.check = this.checkedArr[0].value
          } else {
            this.check = ''
          }
        },
        immediate: true,
        deep: true
      },
    },
    methods: {
      // 选择选项
      select(item) {
        if(!item.hasChecked) {
          // this.$A.MS('当前项不可选')
        }else{
          // if (this.multiple) {
            // item.checked = !item.checked
            
          // this.$emit('change', [item])
          // if(this.multiple) {
          //   let res = []
          //   this.checkedArr.length && this.checkedArr.forEach((item, index) => {
          //     res.push(item.label)
          //     this.checkedString = res.join(',')
          //   })
          // }else{
          //   this.$emit('confirm', this.checkedArr)
          // }
          // this.$emit('change', item)
          this.$emit('confirm', item)
        }
        

      },
      /**
       * 展开下级  通过监听expand事件在父组件获取下级数据
       * @param item
       */
      expand(item) {
        if(!this.navs.find(i => i.value == item.value)) {
          this.navs.push({
            label: item.name,
            value: item.id,
            id:item.id,
            disabled: false,
          })
          console.log(this.navs)
          this.navs[0].disabled = false
          this.navs[this.navs.length - 2].disabled = false
          this.navs[this.navs.length - 1].disabled = true
          console.log(item)
          this.$emit('expand', item)
        }
      },
      unexpand(item) {
        this.navs.splice(this.navs.findIndex(i => i.value == item.value) + 1)
        this.$emit('unexpand', item)
      },
      // 选择结果确认
      confirm() {
        this.$emit('confirm', this.checkedArr)
      },

      // 搜索结果点击确认回调
      searchConfirm(ev) {
        this.closeSearch()
        this.$emit('confirm', ev)
      },
      // 搜索回调
      search(ev) {
        console.log(ev)
        this.searchLists = [
          {
            label: '中建八局南方公司西北分公司北分公司北分公司',
            value: '1',
            disabled: false,
            checked: false,
            hasChecked: true,
            hasChildren: true
          },
          {
            label: '2',
            value: '2',
            disabled: false,
            checked: false,
            hasChecked: true,
            hasChildren: true
          },
          {
            label: '3',
            value: '3',
            disabled: false,
            checked: false,
            hasChecked: true,
            hasChildren: true
          },
          {
            label: '4',
            value: '4',
            disabled: false,
            checked: false,
            hasChecked: true,
            hasChildren: true
          },
          {
            label: '5',
            value: '5',
            disabled: false,
            checked: false,
            hasChecked: true,
            hasChildren: true
          },
          {
            label: '6',
            value: '6',
            disabled: false,
            checked: false,
            hasChecked: true,
            hasChildren: true
          },
          {
            label: '7',
            value: '7',
            disabled: false,
            checked: false,
            hasChecked: true,
            hasChildren: true
          },
          {
            label: '8',
            value: '8',
            disabled: false,
            checked: false,
            hasChecked: true,
            hasChildren: true
          },
          {
            label: '9',
            value: '9',
            disabled: false,
            checked: false,
            hasChecked: true,
            hasChildren: true
          },
          {
            label: '10',
            value: '10',
            disabled: false,
            checked: false,
            hasChecked: true,
            hasChildren: true
          },
          {
            label: '11',
            value: '11',
            disabled: false,
            checked: false,
            hasChecked: true,
            hasChildren: true
          },
          {
            label: '12',
            value: '12',
            disabled: false,
            checked: false,
            hasChecked: true,
            hasChildren: true
          }
        ]
      }
    },
    destroyed() {
    }
  }
</script>

<style lang="scss">
  #quesTreeThrough1{
    .list .mu-item-title{
      width: 2.3rem!important;
      flex: unset;
    }
    .navs{
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 2.3rem;
      color: #ff8a1b;
    }
    .mu-breadcrumbs-item.is-disabled .navs{
      color: rgba(0,0,0,.38);
    }
    .mu-radio-label{
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 2.3rem;
      font-size:0.15rem;
      font-weight:400;
      color:rgba(61,61,61,1);
      line-height:0.21rem;
    }
    .mu-item {
      padding: 0 14px;
      height: .55rem;
      justify-content: space-between;
    }

    .mu-list {
      padding: 0 ;
    }

    .mu-list > li {
      background: #fff;
    }

    .mu-item-action.is-more {
      padding: 0 14px;
      min-width: unset;
      width: .9rem;
      position: absolute;
      right: 0;
      flex-direction: row;
      align-items: center;
      &:after{
        content: '';
        position: absolute;
        left: 0;
        height: .24rem;
        border-left: 2px solid #f0f0f0;

      }

    }

    .mu-breadcrumbs > li {
      font-size: 0.15rem;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(255, 138, 27, 1);
      .mu-icon {
        font-size: .2rem;
      }
    }

    .mu-breadcrumbs-divider {
      padding: 0 .05rem;
      color: rgba(0, 0, 0, .38);
    }
    .fiexd-b{
      border-top: 1px solid #f8f8f8;
      position: fixed;
      bottom: 0;
      left: 0;
      padding: 0;
    }
    .search{
      width:3.47rem;
      height:0.33rem;
      background:rgba(248,248,248,1);
      border-radius:0.83rem;font-size:0.13rem;
      font-weight:400;
      color:rgba(140,140,140,1);
      text-align: center;
      align-items: center;
      display: flex;
      justify-content: center
    }
  }

</style>
